<template>
    <div class="login-page">
        <div class="login-box" align="center">
            <div style="margin-top: 100px;">
                <h1 style="color: dodgerblue;">HIS医院信息系统</h1>
                <!-- 登录表单 -->
                <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
                    <el-form-item label="账号" prop="username" style="width: 400px;">
                        <el-input v-model="loginForm.username" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" style="width: 400px;">
                        <el-input type="password" v-model="loginForm.password" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">登录</el-button>
                        <el-button type="primary" @click="register">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            loginForm: {
                username: "",
                password: ""
            },
            loginRules: {
                username: [
                    { required: true, message: "请输入账号", trigger: "blur" },
                    { min: 2, max: 7, message: "长度在1到7个字符", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 5, max: 10, message: "长度在5到10个字符", trigger: "blur" }
                ],
            }
        };
    },
    methods: {
        onSubmit: function () {
            this.$refs.loginFormRef.validate(async valid => {
                if (!valid) return;
                //登录验证
                //参数：String username, String password
                await axios.get("http://127.0.0.1:8088/user/verify", { params: { username: this.loginForm.username, password: this.loginForm.password } }).then((res) => {
                    console.log(res.data.data)
                    if (res.data.code === 1) {
                        this.$message.success("登录成功")
                        //跳转到home界面
                        this.$router.push("/main")
                    }
                    else {
                        return this.$message.error("登录失败")
                    }
                })
            })
        },

        register: function () {
            //跳转到register界面
            this.$router.push("/register")
        }
    },
}
</script>

<style scoped>
.login-page {
    height: 800px;
    width: 100%;
 /* background: url("D:\all_worksapces\vscode\vue-demo\vue-project1\public\assets\图片1.png");
  changeto相对路径*/
    background:url("./assets/图片1.png");
    background-repeat: no-repeat;
    position: fixed;
    background-size: cover;
}
</style>
